<template>
	<view>
		<scroll-view class="address-box" scroll-y v-if="addressList.length > 0">
			<u-swipe-action>
				<u-swipe-action-item :options="options1" v-for="item in addressList" @click="onDel(item.id, item.isDefault)" :key="item.id">
					<view class="address" @click="onCheck(item)">
						<view class="left">
							<!-- 地址信息 -->
							<view class="company">
								<view
									class="company-left"
									:style="{
										backgroundColor: item.type === 0 ? '#E3EEFD' : item.type === 1 ? '#F7DFA8' : item.type === 2 ? '#EDF9E5' : '#FDE8F5',
										color: item.type === 0 ? '#5DA5EF' : item.type === 1 ? '#FE7E0C' : item.type === 2 ? '#5ABE66' : '#F56C6f'
									}"
								>
									{{ item.type === 0 ? '家' : item.type === 1 ? '公司' : item.type === 2 ? '学校' : '其他' }}
								</view>
								<!-- <view style="height: 22rpx; overflow: hidden">
									<u-tag
										style="margin-right: 10rpx"
										:text="item.type === 0 ? '家' : item.type === 1 ? '公司' : item.type === 2 ? '学校' : '其他'"
										size="mini"
										:type="item.type === 0 ? 'warning' : item.type === 1 ? 'success' : item.type === 2 ? 'error' : 'primary'"
									></u-tag>
								</view> -->
								<view class="company-right">
									<!-- {{item.address}} {{item.street}} {{item.houseNumber}} -->
									{{
										`${item.address + item.street + item.houseNumber}`.length > 16
											? `${item.address + item.street + item.houseNumber}`.substring(0, 16) + '...'
											: `${item.address + item.street + item.houseNumber}`
									}}
								</view>
							</view>
							<!-- 个人信息 -->
							<view class="user-info">
								<view class="userame">{{ item.name.length > 9 ? item.name.slice(0, 9) + '...' : item.name }}</view>
								<view class="gender">
									{{ item.sex ? '先生' : '女士' }}
								</view>
								<view class="userTem">
									{{ item.mobile.replace(/(\d{3})\d{4}(\d{4})/, '\$1****\$2') }}
								</view>
							</view>
						</view>
						<view class="right">
							<view class="default" v-if="item.isDefault">默认</view>
							<uni-icons type="compose" size="23" color="#909399" @tap.stop="onDetail(item.id)" />
							<!-- <u-icon name="edit-pen-fill" size="23" color="#909399" @click.stop="onDetail(item.id)" /> -->
						</view>
					</view>
				</u-swipe-action-item>
			</u-swipe-action>
		</scroll-view>

		<view class="none" v-else>
			<image src="/static/images/order/default_img_order.png"></image>
			<view>暂无地址</view>
		</view>

		<view class="add-address">
			<!-- <button @click="integrals" type="primary" plain="true" size="mini">
				<uni-icons custom-prefix="iconfont" color="#efb541" type="icon-qiaquan" size="23"
					style="margin-right: 10rpx;" />
				微信导入地址
			</button> -->
			<view class="btn">
				<u-button size="large" @click="$u.route('/pages/user/newAddress/newAddress')" type="primary" icon="plus-circle" text="新增收货地址"></u-button>
				<!-- <button @click="$u.route('/pages/user/newAddress/newAddress')" type="primary" size="mini">
					<uni-icons custom-prefix="iconfont" color="#fff" type="icon-qiaquan" size="23" style="margin-right: 10rpx" /> 
					新增收货地址
				</button> -->
			</view>
		</view>
	</view>
</template>

<!-- 
	1.判断从外卖订单界面进来还是个人信息进来，如果是直接点击每一条选中传入vuex中，页面直接调用
	2.编辑按钮点击stop穿透事件
	3.默认选中默认地址 ？？
	4.外卖订单界面进来选中uni.navgateBack()
 -->
<script>
import { mapMutations } from 'vuex';
export default {
	data() {
		return {
			addressList: [],
			order: '',
			options1: [
				{
					text: '删除',
					style: {
						backgroundColor: '#f56c6c',
						marginTop: '20rpx'
					}
				}
			]
		};
	},
	onLoad(opt) {
		// console.log(opt);
		// this.onAddress()
		this.order = opt.address;
	},
	onReady() {
		// #ifdef MP-ALIPAY
		uni.hideHomeButton();
		uni.setNavigationBarColor({
			frontColor: '#000000', // 设置文本颜色
			backgroundColor: '#ffffff' // 设置背景颜色
		});
		// #endif
	},
	onShow() {
		this.onAddress();
	},
	methods: {
		...mapMutations(['SET_ADDRESS', 'SET_CLASSTYPE']),
		onAddress() {
			let _that = this;
			_that.$api.GetAddressData().then((res) => {
				// console.log(res);
				this.addressList = res.data;
			});
		},
		onDetail(id) {
			uni.navigateTo({
				url: `/pages/user/newAddress/newAddress?id=${id}`
			});
		},
		// 删除
		onDel(id, isDefault) {
			const _that = this;
			if (isDefault)
				return uni.showToast({
					icon: 'error',
					title: '默认地址不能删除'
				});
			uni.showModal({
				title: '温馨提示',
				content: '确认删除地址吗',
				async success(res) {
					if (res.confirm) {
						await _that.$api.deleteAddress({
							id
						});
						_that.onAddress();
					}
				}
			});
		},
		onCheck(item) {
			if (this.order) {
				this.SET_ADDRESS(item); // 地址存入vuex
				this.SET_CLASSTYPE(3); // 存储Ftype
				if (this.order === 'image') {
					// 如果从首页进入，跳转tab页面
					uni.removeStorageSync('deskId');
					uni.removeStorageSync('orderId');
					uni.switchTab({
						url: '/pages/tab_bar/classify/classify'
					});
					return;
				}
				uni.navigateBack();
			}
		}
		// 微信导入地址
		// integrals() {
		// 	uni.chooseAddress({
		// 		success(res) {
		// 			console.log(res.userName)
		// 			console.log(res.postalCode)
		// 			console.log(res.provinceName)
		// 			console.log(res.cityName)
		// 			console.log(res.countyName)
		// 			console.log(res.detailInfo)
		// 			console.log(res.nationalCode)
		// 			console.log(res.telNumber)
		// 		}
		// 	})
		// }
	}
};
</script>

<style lang="scss" scoped>
::v-deep .u-swipe-action-item {
	margin-bottom: 20rpx;
}

.address-box {
	width: 100%;
	height: 80vh;
	padding: 20rpx;

	.address {
		position: relative;
		display: flex;
		justify-content: space-between;
		height: 80px;
		background-color: #fff;
		border-radius: 5rpx;
		padding: 20rpx;

		.company {
			display: flex;

			.company-left {
				// width: 50rpx;
				height: 35rpx;
				margin-right: 10rpx;
				background-color: pink;
				border-radius: 10rpx;
				font-size: 20rpx;
				line-height: 35rpx;
				text-align: center;
				color: hotpink;
				padding: 0 10rpx;
			}

			.company-right {
				height: 35rpx;
				line-height: 35rpx;
				font-size: 30rpx;
			}
		}

		.user-info {
			display: flex;
			margin-top: 30rpx;
			color: #999999;
			font-size: 14px;

			.userame {
				max-width: 180rpx;
				margin-right: 20rpx;
				overflow: hidden;
			}

			.gender {
				margin-right: 20rpx;
			}
		}

		.right {
			display: flex;
			align-items: center;

			.default {
				width: 60rpx;
				line-height: 30rpx;
				position: absolute;
				top: 0%;
				right: 0%;
				background-color: #efb541;
				border-radius: 5rpx 10rpx;
				color: #fff;
				font-size: 10px;
				text-align: center;
			}
		}
	}
}

.add-address {
	width: 100%;
	height: 200rpx;
	position: fixed;
	left: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	// margin-bottom: 50rpx;
	padding: 10rpx 50rpx;
	background-color: #fff;
	.btn {
		// height: 50rpx;
	}
}

.none {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
	color: #777;
	line-height: 1.3rem !important;

	image {
		width: 400rpx;
		height: 333rpx;
		margin-bottom: 40rpx;
	}
}
</style>
